<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
    <style>
      .box{
        width: 200px;
        height: 100px;
        background: #acf;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      //创建虚拟 DOM 对象
      let vdom = <div>
           <h2>绑定事件</h2>
           <div className="box" onClick={() => {
              alert('今天天气还不错哦~~~');
           }}></div>

           <h2>鼠标移入事件</h2>
           <div className="box" onMouseOver={function(){
            alert('你把鼠标放到了我的身上');
           }}></div>

           <h2>获取事件源</h2>
           <div className="box" 
              onMouseOver={function(e){
                //在 react 事件回调中, 不能使用 this 获取事件源
                // console.log(this);
                //需要使用 e.target 来获取事件源
                // console.log(e.target);
                e.target.style.background = '#666';
              }
            }
              onMouseOut={e => {
                e.target.style.background = '#acf';
              }}
            ></div>

            <h2>阻止默认行为</h2>
            <a href="http://www.baidu.com" onClick={(e) => {
              //阻止默认行为
              e.preventDefault();
            }}>百度</a>

            <h2>查看原生事件对象</h2>
            <button onClick={(e) => {
              // 事件对象就是事件回调函数执行时接收的参数  e 
              console.log(e);
            }}>点击我</button>

            <h2>input 的 change 事件</h2>
            <input type="text" onChange={() => {
              console.log('改变了啊啊啊~~')
            }} />

            <h2>鼠标位置</h2>
            <div className="box" onClick={(e) => {
              console.log(e.clientX);
              console.log(e.clientY);
            }}></div>
        </div>;
      
      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'))
    </script>
</body>
</html>
